import styles from './index.less';
import { history, Link, useIntl, useLocation } from 'umi';
import { Form, Input, Button, message, Space } from 'antd';
import request from '@/utils/request';

const ResetPasswordPage = function () {
  const intl = useIntl();
  const ulocation = useLocation();
  const { query = {} } = ulocation;
  console.log('ulocation', ulocation);

  const onFinish = (values: any) => {
    console.log('Success:', values);
  };

  const onResetPassword = (values: any) => {
    console.log('Success:', values);
    if (values.newPassword !== values.newPassword2) {
      message.success(
        intl.formatMessage({ id: 'twoPasswordsAreInconsistent' }),
      );
      return;
    }
    request
      .patch('/user/password/forgot', values)
      .then((res) => {
        message.success(intl.formatMessage({ id: 'resetsuccess' }));
        history.goBack();
      })
      .catch((err) => {
        message.error(err.message);
      });
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  const onCancel = () => {
    history.goBack();
  };

  return (
    <div className={styles.loginContainer}>
      <div className={styles.loginTitle}>
        {query.source === 'my'
          ? intl.formatMessage({ id: 'resetpassword' })
          : intl.formatMessage({ id: 'forgetpassword' })}
      </div>
      {query.source === 'my' ? (
        <Form
          layout="vertical"
          initialValues={{ remember: true }}
          onFinish={onResetPassword}
          className={styles.loginForm}
        >
          <Form.Item
            label={intl.formatMessage({ id: 'newpassword' })}
            name="newPassword"
            rules={[
              {
                required: true,
                message: intl.formatMessage({ id: 'p_e_newpassword' }),
              },
            ]}
          >
            <Input.Password
              placeholder={intl.formatMessage({ id: 'p_e_newpassword' })}
            />
          </Form.Item>
          <Form.Item
            label={intl.formatMessage({ id: 'confirmNewPassword' })}
            name="newPassword2"
            rules={[
              {
                required: true,
                message: intl.formatMessage({ id: 'p_re_newpassword' }),
              },
            ]}
          >
            <Input.Password
              placeholder={intl.formatMessage({ id: 'p_re_newpassword' })}
            />
          </Form.Item>
          <Form.Item>
            <Space>
              <Button onClick={onCancel}>
                {intl.formatMessage({ id: 'cancel' })}
              </Button>
              <Button type="primary" htmlType="submit">
                {intl.formatMessage({ id: 'submit' })}
              </Button>
            </Space>
          </Form.Item>
        </Form>
      ) : (
        <Form
          layout="vertical"
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          className={styles.loginForm}
        >
          <Form.Item
            label={intl.formatMessage({ id: 'email' })}
            name="email"
            rules={[
              {
                required: true,
                message: intl.formatMessage({ id: 'pleaseinputyouremail' }),
              },
            ]}
          >
            <Input placeholder={intl.formatMessage({ id: 'enteremail' })} />
          </Form.Item>
          <Form.Item>
            <Button type="primary" block htmlType="submit">
              {intl.formatMessage({ id: 'submit' })}
            </Button>
            <div className={styles.reg}>
              {intl.formatMessage({ id: 'haveanaccount' })}
              <Link to="/login">{intl.formatMessage({ id: 'login' })}</Link>
            </div>
          </Form.Item>
        </Form>
      )}
    </div>
  );
};

export default ResetPasswordPage;
